<template>
  <div>
    <a-button :disabled="disabled" @click="handleSelectGoods">选择商品</a-button>
    <a-table
        v-show="selectedItems.length"
        class="table-goodsList"
        rowKey="sku"
        :columns="columns"
        :dataSource="selectedItems"
        :pagination="false"
    >
      <!-- 商品信息 -->
      <template v-slot:item="item">
        <SkuItem
            :data="{
            image: item.image,
            imageAlt: '商品图片',
            title: item.productName,
            subtitle: `¥${item.salePrice}`
          }"
            :subTitleColor="true"
        />
      </template>
      <!-- 操作项 -->
      <template v-slot:action="text, item, index">
        <span v-action:delete>
          <a v-if="!disabled" @click="handleDeleteItem(index)">删除</a>
        </span>
      </template>
    </a-table>
    <ProductModal
        ref="ProductModal"
        :multiple="multiple"
        :maxNum="maxNum"
        :defaultList="selectedItems"
        @handleSubmit="handleSelectGoodsSubmit"
    />
  </div>
</template>

<script>
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import cloneDeep from 'lodash.clonedeep'
import {ProductModal} from '@/components/Modal'
import {SkuItem} from '@/components/Table'

const columns = [
  {
    title: 'sku',
    dataIndex: 'sku'
  },
  {
    title: '商品信息',
    scopedSlots: {customRender: 'item'}
  },
  {
    title: '库存总量',
    dataIndex: 'stockTotal'
  },
  {
    title: '操作',
    width: '180px',
    dataIndex: 'action',
    scopedSlots: {customRender: 'action'}
  }
]

// 商品选择器组件
export default {
  name: 'SelectGoods',
  components: {
    ProductModal,
    SkuItem
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // 多选模式, 如果false为单选
    multiple: PropTypes.bool.def(true),
    // 最大选择的数量限制, multiple模式下有效
    maxNum: PropTypes.integer.def(100),
    // 默认选中的商品
    defaultList: PropTypes.array.def([]),
    disabled: PropTypes.bool.def(false),
  },
  data() {
    return {
      columns,
      // 已选择的商品列表
      selectedItems: [],
      // 已选择的商品ID集
      selectedSkus: []
    }
  },
  watch: {
    // 设置默认数据
    defaultList: {
      // 首次加载的时候执行函数
      immediate: true,
      handler(val) {
        const {selectedItems} = this
        if (val.length && !selectedItems.length) {
          this.onUpdate(cloneDeep(val))
        }
      }
    }
  },
  created() {
  },
  methods: {

    // 更新数据
    onUpdate(selectedItems) {
      if (this.multiple || !selectedItems.length) {
        // 多选模式
        this.selectedItems = selectedItems
        this.selectedSkus = selectedItems.map(item => item.sku)
      } else {
        // 单选模式
        const single = selectedItems[selectedItems.length - 1]
        this.selectedItems = [single]
        this.selectedSkus = [single.sku]
      }
      this.onChange()
    },

    // 打开商品选择器
    handleSelectGoods() {
      this.$refs.ProductModal.handle()
    },

    // 商品库modal确认回调
    handleSelectGoodsSubmit(result) {
      console.log(result)
      const {selectedItems} = result
      this.onUpdate(cloneDeep(selectedItems))
    },

    // 删除商品
    handleDeleteItem(index) {
      const {selectedItems} = this
      selectedItems.splice(index, 1)
      this.onUpdate(selectedItems)
    },

    // 触发change事件
    onChange() {
      const {multiple, selectedSkus} = this
      const skus = multiple ? selectedSkus : (selectedSkus.length ? selectedSkus[0] : undefined)
      return this.$emit('change', skus)
    }

  }
}
</script>

<style lang="less" scoped>
// 商品信息
.table-goodsList {
  margin-top: 10px;
  min-width: 620px;
}
</style>
